<template>
  <div class="block">
    <el-cascader
      v-model="selectedValue"
      v-bind="$attrs"
      :style="{ width: width }"
      :options="list"
      :props="{ expandTrigger: 'hover' }"
      :placeholder="placeholder"
      filterable
      @change="handleChange"
    />
  </div>
</template>

<script>
import { handleCascade } from '@/views/sys/area/api'

export default {
  // 当前页面名称（组件）
  name: 'FtRegionCascade',
  // 引用组件
  components: { },
  directives: { },
  filters: {},
  // props属性 这里只定义了基本的，目的是防止用户传递无效的属性（如错误拼写），其他的el-select的属性会默认继承，用法一样，因为使用v-bind="$attrs"，这个会将非props定义的属性继承过来
  props: {
    value: {
      type: Array,
      default: undefined
    },
    queryForm: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    width: {
      type: String,
      default: '207px'
    }
  },
  data() {
    return {
      loading: false,
      // 选中值
      selectedValue: this.value,
      list: []
    }
  },
  computed: {},
  watch: {
    value(val) {
      this.selectedValue = val
    },
    selectedValue(val) {
      this.$emit('input', val)
    }
  },
  created() {},
  mounted() {
    this.handleInit()
  },
  methods: {
    async handleInit() {
      handleCascade().then(res => {
        if (res.data) {
          this.list = res.data
        }
      })
    },
    handleChange(value) {
      this.$emit('change', value)
      // if (this.queryForm) {
      //   this.$emit('change', value)
      // } else {
      //   // 获取选中项的label
      //   const selectedLabel = this.list[value] || ''
      //   // 同时返回value和label
      //   this.$emit('change', { value, label: selectedLabel })
      // }
    }
  }
}
</script>
